<template>
  <div class="data-executor-vue">
    <pageview
            :DatasourceId="choiceDatasourceId"
            ref="PageTableView"
    ></pageview>
  </div>
</template>

<script type="text/ecmascript-6">
  import "../../common/lib/ace/ace";
  import "../../common/lib/ace/theme-monokai";
  import "../../common/lib/ace/mode-sql";
  import "../../common/lib/ace/ext-language_tools";
  import "../../common/lib/ace/snippets/sql";
  import PageTableView from "../layouts/PageTableView";
  export default {
    data() {
      return {

      }
    },
    components: { PageTableView },
    props: [
      "choiceDatasourceId",
      "selectValue"
    ],
    watch: {
      pageList: {
        deep: true,
        handler: function (val) {
          console.log("pagelist ---- ", val);
        },
      },
      $route: function (newRoute, oldRoute) {
        // 如果当前路由不是执行器，那么就显示结果表
        if (this.$route.path === "/data/executor") {
          this.showTable = true;
          this.paneClickDisable = false;
        } else {
          this.showTable = false;
          this.paneClickDisable = true;
        }
        this.activePage = newRoute.fullPath;
        if (this.linkList.indexOf(newRoute.fullPath) < 0) {
          this.linkList.push(newRoute.fullPath);
          this.pageList.push(newRoute);
        }
      },
      font_size: function (val) {
        this.$store.commit("global/setFont", val);
        if (this.$route.path === "/data/executor") {
          this.initAceEditor("sqlExecutorEditor", 30);
          this.sqlExecutorEditor.setFontSize(
                  parseInt(this.$store.getters["global/getFont"])
          );
        }
      },
      DatasourceId: function (val) {
        debugger
        this.choiceDatasourceId = val;
      },
      activePage: function (key) {
        this.$router.push(key).catch((err) => {
          err;
        });
      },
    },
    mounted() {
      console.info(this.choiceDatasourceId)
      console.info(this.choiceDatasourceId+"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawerrt4hbthgf")
      this.$refs.PageTableView.loadDatasourceList();
      // 下面两行先后顺序不能改
      this.$refs.PageTableView.addEditorCompleter();
      this.$refs.PageTableView.loadFavoriteList();
      this.$parent.sqlExecutorEditor = this.$refs.PageTableView.initAceEditor(
              "sqlExecutorEditor",
              30
      );
      this.$parent.sqlExecutorEditor.setFontSize(
              this.$store.getters["global/getFont"]
      );
      let that = this.$parent;
      this.$parent.sqlExecutorEditor.commands.addCommand({
        name: "execute-sql",
        bindKey: {
          win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter",
          mac: "Command-R|Command-Shift-R|Command-Enter",
        },
        exec: function (editor) {
          that.doExecutorSql();
        },
      });
      that.showTable = true;
      that.historyDrawerVisible = false;
      if (this.$route.query.type === "preview") {
        let dataSql = that.getExecuteSql();
        that.sqlExecutorEditor.setValue(dataSql, 1);
        that.doExecutorSql();
      }
      this.choiceDatasourceId=this.choiceDatasourceId;
    },
    methods: {

      setcongig(config){
        console.info(config)
        this.$refs.PageTableView.setcongig(config);
      },
      addtables(data) {
        this.$refs.PageTableView.pageList.push(data);
      },
      initAceEditorPage(editor, minLines) {
        return this.$refs.PageTableView.initAceEditor(editor, minLines);
      },
      loadEditorDataPage(choiceDatasourceId) {
        this.$refs.PageTableView.loadEditorData(choiceDatasourceId);
        this.$refs.PageTableView.choiceDatasourceId = choiceDatasourceId;
      },
      initLoadDataListPage() {
        this.$refs.PageTableView.initLoadDataList();
      },
      loadDatasourceListPage() {
        this.$refs.PageTableView.loadDatasourceList();
      },
      openDownloadDialog(url, saveName) {
        if (typeof url == "object" && url instanceof Blob) {
          url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement("a");
        aLink.href = url;
        aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent("click");
        else {
          event = document.createEvent("MouseEvents");
          event.initMouseEvent(
                  "click",
                  true,
                  false,
                  window,
                  0,
                  0,
                  0,
                  0,
                  0,
                  false,
                  false,
                  false,
                  false,
                  0,
                  null
          );
        }
        aLink.dispatchEvent(event);
      },
    }
  }
</script>

<style>
  .data-executor-editor {
    margin-top: 0;
  }

  .editor-run {
    width: 18px;
    height: 18px;
    background-image: url("");
    background-size: 100%;
    display: block;
  }

  .editor-download {
    width: 18px;
    height: 18px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-format {
    width: 18px;
    height: 18px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-font {
    width: 14px;
    margin-left: 3px;
    height: 14px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-cloud {
    width: 14px;
    margin-left: 3px;
    height: 14px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-local {
    width: 14px;
    margin-left: 3px;
    height: 14px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-backend {
    width: 16px;
    margin-left: 2px;
    height: 16px;
    background: url("");
    background-size: 100%;
    display: block;
  }

  .editor-activate-label {
    width: 16px;
    margin-left: 2px;
    height: 16px;
    background: url("");
    background-size: 100%;
    display: block;
  }
  .el-card__body {
    padding: 10px;
  }
  .ace_gutter-cell {
    padding-left: 0px;
  }
  .ace_gutter {
    width: 20px;
  }
  .ace_gutter-layer {
    width: 20px;
  }
  .el-card__body {
    padding: 5px;
    margin-bottom: 0px;
  }
  .data-executor-editor {
    margin-top: 0;
    margin-bottom: 0px;
  }
  el-card is-always-shadow {
    margin-bottom: 5px;
  }
</style>


